{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<div id="app" v-cloak>
    <div class="el-warp">
        <el-skeleton :loading="loading" :rows="8" class="el-pager-order">
            <div class="info">
                <img :src="order.u_cover">
                <p>订单编号：{{order.id}}</p>
                <p>订单标题：充值金额获得<b style="color: #E6A23C">{{order.pay_rmb}}</b>元</p>
                <p>支付金额：<b style="color: #E6A23C">{{order.pay_rmb}}</b></p>
                <p>创建时间：{{order.create_time}}</p>
                <p>
                    订单状态：
                    <template v-if="order.status === 1">待支付</template>
                    <template v-if="order.status === 2">已支付</template>
                    <template v-if="order.status === 3">已完成</template>
                    <template v-if="order.status === 4">订单关闭，交易已过期</template>
                </p>
                <p v-if="order.status === 1">订单关闭：{{invalid}}</p>
            </div>
            <div class="pay">
                <template v-if="order.status === 4">
                    <el-empty description="亲亲，订单已经失效，请重新下单哦~"></el-empty>
                </template>
                <template v-if="order.status === 1">
                    <div class="qrcode">
                        <div class="warp" v-loading="payLoading">
                            <div v-html="payQrcode"></div>
                            <div class="success" v-if="order.status === 3"></div>
                        </div>
                        <div class="bottom">
                            <i class="el-icon-full-screen"></i>
                            <span>请使用{{payMethod == 0 ? '支付宝' : '微信'}}扫一扫二维码支付</span>
                        </div>
                    </div>
                    <ul class="method">
                        <li :class="{active: payMethod == 0}" @click="payMethodChange(0)"><img src="/admin/images/pay-ali.png"></li>
                        <li :class="{active: payMethod == 1}" @click="payMethodChange(1)"><img src="/admin/images/pay-wechat.png"></li>
                    </ul>
                </template>
                <template v-if="order.status === 3">
                    <p style="margin-bottom: 20px">订单充值成功</p>
                </template>
            </div>
        </el-skeleton>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                id: locationUrl.get('id'),
                token: '',
                order: {},
                orderUrl: 'api/userrecharge/user/order',
                statusUrl: 'api/userrecharge/user/orderStatus',
                payMethodUrl: 'api/userrecharge/user/payMethod',
                payMethod: 0,
                payQrcode: '',
                payLoading: false,
                invalid: '',
                rate: 5,
            }
        },
        created() {
            this.getOrder();
            setInterval(() => {
                this.getStatus();
            }, 3000)
        },
        methods: {
            /**
             * 订单详情
             */
            getOrder() {
                let self = this;
                self.loading = true;
                post(self.orderUrl, {id: self.id}, function(res) {
                    if (res.status === 'success') {
                        self.order = res.data;
                        self.loading = false;
                        self.payMethodChange(self.order.pay_method)
                        if (self.order.status === 1) {
                            self.invalid = self.invalidTime(self.order.invalid);
                            setInterval(() => {
                                self.invalid = self.invalidTime(self.order.invalid);
                            }, 1000)
                        }
                    }
                });
            },
            /**
             * 订单状态
             */
            getStatus() {
                let self = this;
                if (self.order.status == 1) {
                    post(self.statusUrl, {id: self.id}, function(res) {
                        if (res.status === 'success') {
                            self.order.status = res.data;
                        }
                    });
                }
            },
            /**
             * 倒计时
             */
            invalidTime(endtime) {
                var nowtime = new Date();  //获取当前时间
                var lefttime = (endtime*1000) - nowtime.getTime(); //距离结束时间的毫秒数
                var leftm = Math.floor(lefttime/(1000*60)%60);  //计算分钟数
                var lefts = Math.floor(lefttime/1000%60);  //计算秒数
                if (leftm < 10) {
                    leftm = '0' + leftm;
                }
                if (lefts < 10) {
                    lefts = '0' + lefts;
                }
                return leftm + ":" + lefts;  //返回倒计时的字符串
            },
            /**
             * 支付方式
             */
            payMethodChange(payMethod = 0) {
                let self = this;
                if (self.order.status === 1) {
                    self.payLoading = true;
                    post(self.payMethodUrl, {id: self.order.id, method: payMethod}, function(res) {
                        if (res.status === 'success') {
                            self.payMethod = payMethod;
                            self.payQrcode = res.data;
                        } else {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                        self.payLoading = false;
                    });
                }
            },
        },
    })
</script>   
</body>
</html>